<!doctype html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=yes">
    <title>用户登录_{:confv('title')}</title>
    <meta name="keywords" content="{:confv('keywords')}">
    <meta name="description" content="{:confv('description')}">
    {load href="__static__/common/css/common_login.css" /}
    {load href="__static__/xzyn/css/xzyn.css" /}
    {load href="__static__/xzyn/css/xzyn_icon.min.css" /}
    {load href="__static__/common/bootstrap/css/bootstrap.min.css" /}
</head>

<body>
    <div class="cont">
        <div class="demo">
            <div class="login">
                <div class="login__check">
                	<a href="{:url('index/index/index')}">
                    	<img src="{:confv('logo')}" alt="">
                    </a>
                </div>
                <form action="" class="login__form" data-type = "login">
                    <div class="login__row">
                        <svg class="login__icon name svg-icon" viewBox="0 0 20 20">
                            <path d="M0,20 a10,8 0 0,1 20,0z M10,0 a4,4 0 0,1 0,8 a4,4 0 0,1 0,-8" />
                        </svg>
                        <input type="text" name="username" value="" class="login__input name" placeholder="用户名" />
                    </div>
                    <div class="login__row">
                        <svg class="login__icon pass svg-icon" viewBox="0 0 20 20">
                            <path d="M0,20 20,20 20,8 0,8z M10,13 10,16z M4,8 a6,8 0 0,1 12,0" />
                        </svg>
                        <input type="password" name="password" value="" class="login__input pass" placeholder="密码" />
                    </div>
                    <button class="login__submit">登 录</button>
                    <p class="login__signup">
                        <a href="{:url('login/getCode')}" class="btn btn-info x-mr-5"><i class="fa fa-qq fa-lg"></i></a> 还没有账号? &nbsp;
                        <a class="login_gzc" href="" target="_blank">立刻注册</a>
                    </p>
                </form>
            </div>
            <div class="app">
                <div class="app__bot">
                    <div class="app__title">
                        欢迎注册{:confv('title')}
                    </div>
                    <form class="app__meetings reg__form">
                        <div class="app__meeting">
                            <div class="glyphicon glyphicon-user"></div>
                            <div class="reg__enter">
                                <input type="text" name="username" value="" class="name" placeholder="用户名" />
                            </div>
                        </div>
                        <div class="app__meeting">
                            <div class="glyphicon glyphicon-envelope "></div>
                            <div class="reg__enter">
                                <input type="email" name="email" value="" class="name" placeholder="邮箱地址" />
                            </div>
                        </div>
                        <div class="app__meeting">
                            <div class="glyphicon glyphicon-lock "></div>
                            <div class="reg__enter">
                                <input type="password" name="password" value="" class="name" placeholder="密码" />
                            </div>
                        </div>
                        <div class="app__meeting">
                            <div class="glyphicon glyphicon-log-in"></div>
                            <div class="reg__enter">
                                <input type="password" name="repassword" value="" class="name" placeholder="确认密码" />
                            </div>
                        </div>
                        <div class="text-center">
                            <button class="login__submit">注册</button>
                        </div>
                    </form>
                </div>
                <div class="app__logout">
                    <svg class="app__logout-icon svg-icon" viewBox="0 0 20 20">
                        <path d="M6,3 a8,8 0 1,0 8,0 M10,0 10,12" />
                    </svg>
                </div>
            </div>
        </div>
    </div>

    {load href="__static__/common/jquery/jquery-2.2.3.min.js" /}
    {load href="__static__/common/js/common_login.js" /}
    {load href="__static__/xzyn/js/xzyn.js" /}
    <script>
        $(document).ready(function() {
            var animating = false,
                submitPhase1 = 1100,
                submitPhase2 = 400,
                logoutPhase1 = 800,
                $login = $('.login'),
                $app = $('.app');

            function ripple(elem, e) {
                $('.ripple').remove();
                var elTop = elem.offset().top,
                    elLeft = elem.offset().left,
                    x = e.pageX - elLeft,
                    y = e.pageY - elTop;
                var $ripple = $('<div class=\'ripple\'></div>');
                $ripple.css({
                    top: y,
                    left: x
                });
                elem.append($ripple);
            };
            $('.login__form,.reg__form').on('submit', function(e) {
                if(animating)
                    return false;
                var fdata = '';
                var formtype = $(this).data('type');
                if( formtype == 'login'){	//登录
                	var username = $('.login__form input[name^="username"]').val();
                	var password = $('.login__form input[name^="password"]').val();
                	if( username == '' ){xzyn.msg('请填写用户名','e'); return false;}
                	if( password == '' ){xzyn.msg('请填写密码','e'); return false;}
					fdata = {
						'username'	: username,
						'password'	: password,
						'type'		: 'login'
					}

                }else{	//注册
                	var username = $('.reg__form input[name^="username"]').val();
                	var password = $('.reg__form input[name^="password"]').val();
                	var repassword = $('.reg__form input[name^="repassword"]').val();
                	var email = $('.reg__form input[name^="email"]').val();
                	if( username == '' ){xzyn.msg('请填写用户名','e'); return false;}
                	if( password == '' ){xzyn.msg('请填写密码','e'); return false;}
                	if( repassword == '' ){xzyn.msg('请填写确认密码','e'); return false;}
                	if( password != repassword ){xzyn.msg('密码不一致','e'); return false;}
					fdata = {
						'username'	: username,
						'password'	: password,
						'repassword': repassword,
						'email'		: email,
						'type'		: 'reg'
					}
                }
                animating = true;
                var that = $(".login__submit");
                ripple($(that), e);
                $(that).addClass('processing');
                setTimeout(function() {
                	animating = false;
	                $.ajax({
	                    url: "{:url('login/index')}", //请求url
	                    type: "post",  //请求的类型
	                    dataType: "json",  //数据类型
	                    data: fdata, //发送到服务器的数据
	                    success:function(data) { //成功后执行
//	                        console.log(data);
	                        if( data.status == 1 ){
	                        	if( formtype == 'login' ){
	                        		xzyn.msg(data.info,'s',function(){
	                        			window.history.go(-1);
		                        	});
	                        	}else{
		                        	xzyn.msg(data.info,'s',function(){
		                        		$('.app__logout').trigger("click");
		                        	});
	                        	}
								$('input').val('');
	                        }else{
	                        	xzyn.msg(data.info,'e');
	                        }
	                        that.removeClass('processing');
	                    },
	                    error:function(data) { //失败后执行
	                        console.log(data);
	                        that.removeClass('processing');
	                    }
	                });

                }, submitPhase1);
                return false;
            });
            $(".login__signup").on('click','.login_gzc', function(e) {
                var that = $(".login__submit");
                that.addClass('processing success');
                setTimeout(function() {
                    $app.show();
                    $app.css('top');
                    $app.addClass('active');
                }, submitPhase2 - 70);
                setTimeout(function() {
                    $login.hide();
                    $login.addClass('inactive');
                    animating = false;
                    that.removeClass('success processing');
                }, submitPhase2);
                return false;
            });
            $(document).on('click', '.app__logout', function(e) {
                if(animating)
                    return;
                $('.ripple').remove();
                animating = true;
                var that = $(".login__submit");
                that.addClass('processing success');
                setTimeout(function() {
                    $app.removeClass('active');
                    $login.show();
                    $login.css('top');
                    $login.removeClass('inactive');
                }, submitPhase2 - 70);
                setTimeout(function() {
                    $app.hide();
                    $('input').val('');
                    animating = false;
                    that.removeClass('success processing');
                }, submitPhase2);
            });
        });
    </script>
</body>

</html>